<template>
	<view class="searchListWp">
		<view class="searchBox">
			<view class="inputWp">
				<u--input placeholder="请输入内容" border="surround" v-model="searchVal"
					@change="handleTabItemByActivityIndex(activityIndex)"
					@confirm="handleTabItemByActivityIndex(activityIndex)" shape='circle' inputAlign='center'
					suffixIcon='search' suffixIconStyle="font-size: 20px;color:#7B77FE" autoface></u--input>
			</view>
		</view>
		<view class="tabWp">
			<view class="tabItem" v-for="(item,i) in tabsList" :key="i" @click="handleTabItem(i)"
				:class="activityIndex==i?'activityItem':''">
				<view class="title">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="showWp">
			<view class="showItemWp" v-if="activityIndex==0">
				<view class="showItem">
					<cardHolderMoreList :list="cardList" @goToDetail='goToDetail'></cardHolderMoreList>
				</view>

			</view>
			<view class="showItemWp" v-if="activityIndex==1">
				<!-- 活动列表信息 -->
				<view class="">
					<circleList :searchTiTle="searchTiTle" :monthNum="monthNum" :nowMoth="nowMoth"></circleList>
				</view>
			</view>
			<view class="showItemWp" v-if="activityIndex==2">
				<view class="">
					<businessIndex :searchTiTle="searchTiTle"></businessIndex>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import cardHolderMoreList from '@/pagesCard/components/cardHolderMoreList/cardHolderMoreList.vue'
	import circleList from './searchCircleList.vue'
	import businessIndex from './searchBusinessIndex.vue'
	export default {
		components: {
			cardHolderMoreList,
			circleList,
			businessIndex
		},
		data() {
			return {
				searchTiTle: '',
				monthNum: '',
				nowMoth: '',
				cardList: [], //名片列表
				activityIndex: 0,
				tabsList: [{
						title: '名片',
						id: 0
					},
					{
						title: '活动',
						id: 1
					},
					{
						title: '商机',
						id: 2
					},
				],
				searchVal: '',
				openId: '',
				activityList: [],
				businessList: []
			}
		},
		onLoad() {
			let data = uni.getStorageSync('openId')
			if (data.openid) {
				this.openId = data.openid
			}
			this.handleTabItem(0)
		},
		onShow() {

		},
		methods: {
			//名片根据姓名查询
			async searchChange() {
				if (this.searchVal == '') return
				let res = await this.$api.queryCardByCondition({
					openId: this.openId,
					name: this.searchVal
				})
				if (res.success) {
					console.log(res.result, '模糊搜索');
					this.cardList = res.result
				} else {
					this.cardList = []
					uni.showToast({
						title: '查询失败',
						icon: 'none'
					});
				}
			},
			//跳转名片详情
			goToDetail(item, index) {
				console.log('goToDetail', item, index);
				uni.navigateTo({
					url: "/pagesCard/personDetail/personDetail?item=" +
						encodeURIComponent(JSON.stringify(item)),
				});
			},
			//查询活动
			async queryActivityListSearch() {
				// if(!this.searchVal){
				// 	uni.showToast({
				// 			title: '请输入查询标题',
				// 			icon: 'none'
				// 		});
				// 		return 
				// }
				let date = new Date().getTime()
				let newData = this.shijianc(date)
				let dateArr = newData.split('-')
				this.monthNum = dateArr[1].split('')[1]
				this.nowMoth = newData
				this.searchTiTle = this.searchVal
				console.log(this.searchTiTle)
				// let payload={
				// 	title:this.searchVal
				// }
				// let res =await this.$api.getAllCircleList(payload)
				// if(res.success && res.result.length!=0){
				// 	console.log(res.result);
				// 	this.activityList=res.result
				// }else{
				// 	uni.showToast({
				// 		title: '未查询到相关活动',
				// 		icon: 'none'
				// 	});
				// 	this.activityList=[]
				// }
				// },
				// // 点击进入详情页面
				// toCircleInfo(item,index){
				// 	console.log(item,index)
				// 	uni.setStorageSync('circleStatus',item.activeStatus)
				// 	uni.setStorageSync('circleId',item.id)
				// 	uni.navigateTo({
				// 		url: '/pagesCard/circleList/circleListInfo'
				// 	})
			},
			// 时间戳转yy-mm-dd hh-mm-ss
			shijianc(time) {
				var date = new Date(time)
				console.log("测试" + date)
				var Y = date.getFullYear() + '-'
				// + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
				// var M = date.getMonth()+1
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
				// + ':'
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
				return Y + M
			},
			//查询商机
			async queryBusinessListSearch() {
				this.searchTiTle = this.searchVal
				console.log(this.searchTiTle)
				// if(!this.searchVal){
				// 	uni.showToast({
				// 			title: '请输入查询标题',
				// 			icon: 'none'
				// 		});
				// 		return 
				// }
				// let payload={
				// 	title:this.searchVal
				// }
				// let res =await this.$api.businessListSearch(payload)
				// if(res.success && res.result.length!=0 ){
				// 	console.log(res.result);
				// 	this.businessList=res.result
				// }else{
				// 	uni.showToast({
				// 		title: '未查询到相关信息',
				// 		icon: 'none'
				// 	});
				// 	this.businessList=[]
				// }
			},

			handleTabItem(i) {
				this.activityIndex = i
				switch (i) {
					case 0:
						this.searchChange()
						break;
					case 1:
						this.queryActivityListSearch()
						break;
					case 2:
						this.queryBusinessListSearch()
						break;
				}
			},
			handleTabItemByActivityIndex(i) {
				switch (i) {
					case 0:
						this.searchChange()
						break;
					case 1:
						this.queryActivityListSearch()
						break;
					case 2:
						this.queryBusinessListSearch()
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchListWp {
		background-color: #F8F9FF;
		padding: 30upx;
		height: 100vh;

		.searchBox {
			display: flex;
			padding: 30upx 0;
			align-items: center;

			.inputWp {
				flex: 1;
			}

			.more {
				background-color: #E8EFF9;
				width: 60upx;
				height: 60upx;
				border-radius: 30%;
				margin-left: 20upx;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 30upx;
					height: 30upx;
				}
			}
		}

	}

	.showWp {
		.showItemWp {
			padding: 30upx 0;
			// display: flex;
			align-items: center;
			// border-bottom: 1upx solid #ccc;

			.showItem {

				display: flex;
				align-items: center;

				.leftWp {
					margin-right: 20upx;

					//头像
					img {
						width: 80rpx;
						height: 80upx;
						border-radius: 50%;
					}

					.personInfo {}
				}

				.rightWp {
					display: flex;

					.bussinessImg {
						width: 200upx;
						height: 150upx;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.bussinessInfo {}
				}
			}
		}
	}
</style>
<style lang="scss">
	.tabWp {
		margin: 0 auto;
		box-sizing: border-box;
		padding: 0 40upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 9px 1px rgba(92, 87, 254, 0.2);
		border-radius: 20upx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;

		.tabItem {
			flex: 1;
			text-align: center;
			margin: 14upx 0;
			border-radius: 20upx;

			.title {
				font-size: 30upx;
				font-weight: 400;
				padding: 22upx;
			}
		}

		.activityItem {
			background-color: #423BFE;
			color: #FFFFFF;
		}
	}

	.active-list {
		background: #FFFFFF;
		border-bottom: 1upx solid #EEEEEE;
		padding: 41upx 30upx 47upx;
		position: relative;

		.active-status {
			position: absolute;
			width: 140upx;
			height: 130upx;
			top: 38upx;
			right: 29upx;

			img {
				width: 140upx;
				height: 130upx;
			}
		}

		.active-time-box {
			width: 690upx;
			height: 100upx;
			background: #FFFFFF;
			border: 1upx solid #413BF3;
			box-shadow: 0upx 3upx 10upx 0upx rgba(65, 59, 243, 0.1000);
			border-radius: 20upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 100upx;
			text-align: center;
			margin-bottom: 30upx;
		}

		.active-head {
			display: flex;
			letter-spacing: 3upx;

			.head-img {
				width: 72upx;
				height: 72upx;
				border-radius: 50%;

				img {
					width: 72upx;
					height: 72upx;
					margin-top: 1upx;
				}
			}

			.active-name-info {
				margin-left: 21upx;

				.active-name {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.active-introduce {
					margin-top: 19upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 400upx;
				}
			}
		}

		.active-title {
			letter-spacing: 3upx;
			margin-top: 30upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;

			.active-text {
				color: #000000;
			}
		}

		.active-content {
			line-height: 48upx;
		}

		.active-info-img {
			margin: 0 auto;
			margin-top: 30upx;
			width: 690upx;
			height: 350upx;
			border-radius: 30upx;
			position: relative;
			overflow: hidden;

			img {
				width: 690upx;
				height: 350upx;
			}

			.active-info-mask {
				position: absolute;
				width: 690upx;
				height: 70upx;
				bottom: 0;
				background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.1000) 100%);
				line-height: 70upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}
		}

		.active-address {
			margin-top: 30upx;
			letter-spacing: 3upx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.active-address-right {
				.active-address-address {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #413BF3;
					margin-right: 20upx;
					position: relative;
					top: -2upx;
				}

				img {
					width: 21upx;
					height: 24upx;
				}
			}
		}
	}
</style>